<template>
	<z-paging
		ref="paging"
		style="background: #fff; min-height: 100%"
		use-page-scroll
		v-model="dataList"
		:show-loading-more-when-reload="true"
		:refresher-enabled="false"
		:auto-show-back-to-top="true"
		@query="queryList"
	>
		<view class="home">
			<view class="search-panel" :class="{ 'search-panel-sticky': isScroll }">
				<uni-search-bar class="search" placeholder="请输入关键字" :readonly="true" clearButton="none" cancelButton="none" @click="handleClick" />
			</view>
			<view class="swiper-panel">
				<swiper style="height: 100%" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
					<swiper-item style="height: 100%" v-for="(item, index) in swiperImgs" :key="index">
						<image :src="item" class="swiper-item-img" />
					</swiper-item>
				</swiper>
			</view>
			<view class="grid-panel">
				<!-- 1 单日营；2 多日营；3 冬令营；4 夏令营；4 亲子营 -->
				<uni-grid :column="5" :showBorder="false">
					<uni-grid-item class="gride-item" v-for="(item, index) in routeTypeList" :key="index" @tap="handleOpenList(item.routeType)">
						<view class="grid-item-box">
							<image :src="item.src" class="gride-item-img" />
							<text class="text">{{ item.title }}</text>
						</view>
					</uni-grid-item>
				</uni-grid>
			</view>
			<view class="title-panel">
				<image src="~@/asstes/images/home/hot.png" class="title-img" />
				<view class="title-text" style="display: flex; align-items: center" @tap="showMore">
					<view style="margin-right: 5rpx">查看更多</view>
					<image src="~@/asstes/images/home/more.png" style="width: 35rpx; height: 35rpx" />
				</view>
			</view>

			<!-- z-paging默认铺满全屏，此时页面所有view都应放在z-paging标签内，否则会被盖住 -->
			<!-- 需要固定在页面顶部的view请通过slot="top"插入，包括自定义的导航栏 -->
			<view class="item" v-for="(item, index) in dataList" :key="index">
				<armed-card :data="item"></armed-card>
			</view>
		</view>
	</z-paging>
	<tabbar :current="0"></tabbar>
</template>

<script setup>
import { ref, onMounted, reactive, getCurrentInstance } from 'vue';
import tabbar from '@/components/tabbar/index.vue';
import { onPageScroll, onReachBottom, onLoad, onBackPress } from '@dcloudio/uni-app';
import HomeAPI from '@/api/home/api.ts';
import useZPaging from '@/uni_modules/z-paging/components/z-paging/js/hooks/useZPaging.js';
import img1 from '@/asstes/images/home/route-type-1.png';
import img2 from '@/asstes/images/home/route-type-2.png';
import img3 from '@/asstes/images/home/route-type-3.png';
import img4 from '@/asstes/images/home/route-type-4.png';
import img5 from '@/asstes/images/home/route-type-5.png';
import DictApi from '@/api/dict/api';
import AuthAPI from '@/api/auth/api';

const { proxy } = getCurrentInstance();
const paging = ref(null);
useZPaging(paging);
const dataList = ref([]);
const isScroll = ref(false);
const swiperImgs = ref([]);
const routeTypeList = reactive([
	{ routeType: '1', title: '单日营', src: img1 },
	{ routeType: '2', title: '多日营', src: img2 },
	{ routeType: '3', title: '冬令营', src: img3 },
	{ routeType: '4', title: '夏令营', src: img4 },
	{ routeType: '5', title: '亲子营', src: img5 }
]);
onPageScroll((e) => {
	if (e.scrollTop > 20) {
		isScroll.value = true;
	} else {
		isScroll.value = false;
	}
});

// @query所绑定的方法不要自己调用！！需要刷新列表数据时，只需要调用paging.value.reload()即可
const queryList = async (pageNo, pageSize) => {
	HomeAPI.listPopRecommendRoutes({})
		.then(({ data }) => {
			paging.value.complete(data);
		})
		.catch(() => {
			paging.value.complete(false);
		});
};

/**点击搜索框打开搜索页面*/
function handleClick() {
	uni.navigateTo({
		url: '/pages/search/index'
	});
}

/**点击打开营期列表*/
function handleOpenList(routeType) {
	uni.navigateTo({
		url: '/pages/home/camper-list?routeType=' + routeType
	});
}

// tabs通知swiper切换
function tabsChange(index) {
	console.log(index);
	paging.value.reload();
}

function showMore() {
	uni.navigateTo({
		url: '/pages/home/route-type-list'
	});
}

onLoad(async (query) => {
	const code = query?.code;
	if (code) {
		AuthAPI.getAccessToken(code).then(({ data }) => {
			if (data.authSuccess) {
				uni.setStorageSync('auth', data);
				proxy.$isResolve(true);
				uni.redirectTo({
					url: '/pages/home/index'
				});
			} else {
				uni.showToast({
					title: '获取用户授权信息失败',
					icon: 'none',
					duration: 2000
				});
				if (uni.sendNativeEvent) {
					uni.sendNativeEvent('checkTokenAndRedirectToLogin', {}, (res) => {
						console.log('checkTokenAndRedirectToLogin----' + JSON.stringify(res));
					});
				}
				proxy.$isResolve(false);
			}
		});
	} else {
		proxy.$isResolve(false);
	}
	await proxy.$getToken;
	DictApi.getDict().then((res) => {
		uni.setStorageSync('dict', res.data);
	});
});

onMounted(async () => {
	await proxy.$getToken;
	HomeAPI.listCarousels({}).then(({ data }) => {
		swiperImgs.value = data;
	});
});

onBackPress(() => {
	uni.sendNativeEvent('closeMe', { delay: 10 }, (res) => {
		console.log('closeMe----' + JSON.stringify(res));
	});
});
</script>
<style scoped lang="scss">
.home {
	height: 100%;
	background: #fff;
	position: relative;
}
.search-panel {
	position: absolute;
	top: 30rpx;
	height: 110rpx;
	z-index: 90;
	width: 100%;
	border-radius: 0;
	background: none;
	display: flex;
	align-items: center;
	justify-content: center;
	.search {
		width: 95%;
		opacity: 1;
		border-radius: 19.62rpx;
	}
}
.search-panel-sticky {
	position: fixed;
	top: 0;
	z-index: 99;
	background: #fff;
}

.swiper-panel {
	height: 480rpx;
	width: 100%;

	.swiper-item-img {
		height: 100%;
		width: 100%;
	}
}
.grid-panel {
	width: 100%;
	margin-bottom: 10rpx;
	.gride-item {
		padding: 2rpx 10rpx;
		box-sizing: border-box;
	}
	.grid-item-box {
		height: 100%;
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		.text {
			margin-top: 20rpx;
			font-size: 23.08rpx;
			font-weight: 600;
			letter-spacing: 0rpx;
			line-height: 27.69rpx;
			color: rgba(102, 205, 157, 1);
		}
	}
	.gride-item-img {
		margin-top: 15rpx;
		height: 80rpx;
		width: 80rpx;
	}
}
.title-panel {
	height: 100rpx;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	.title-img {
		width: 190rpx;
		height: 82rpx;
	}
	.title-text {
		margin-right: 40rpx;
		font-size: 28rpx;
		font-weight: 600;
		letter-spacing: 0rpx;
		line-height: 27.69rpx;
		color: rgba(102, 205, 157, 1);
	}
}
.list-panel {
	width: 100%;
	background: pink;
}
</style>
